<template>
	<view>
		<tn-tabs id="tabs" activeColor="#ffd947" inactiveColor="#fff" bold :list="scrollList" :current="current" :isScroll="false" backgroundColor="#0a47c4"
			@change="tabChange"></tn-tabs>

		<!-- 考试大厅 -->
		<view v-if="current===0">
			<view class="tn-margin-sm">
				<!-- 进行中的考试 -->
				<block v-if="isRun">
					<tn-notice-bar style="margin-bottom: 10px;border-radius: 20px;"
						:list="['您有正在进行的考试，离线太久考试将被作废哦，点击此处可继续考试！']" @click="toExam"
						backgroundColor='tn-main-gradient-indigo'></tn-notice-bar>
				</block>

				<block v-for="(item, index) in list" :key="index">
					<uni-card class="card" @click="toDetail(item)" :title="item.title">
						<!-- <view> <text class="uni-body">描述：<text class="value">{{ item.content }}</text></text></view> -->
						<view><text class="label">考试时间：</text><text
								class="value">{{item.timeLimit===false?'不限时':item.timeLimit}}</text></view>
						<view> <text class="label">考试机会：<text class="value">{{ item.restrictNum }}次</text></text></view>
						<view><text class="label">考试状态：</text><text class="value">{{ item.state===0?'未完成':'已完成' }}</text></view>
						<view><text class="label">需培训：</text><text class="value">{{secondsToHMS(item.trainingDuration*60)}}</text>
						</view>
						<view><text class="label">已培训：</text><text class="value">{{secondsToHMS(item.finishDuration*60)}}</text></view>
						<view class="tn-flex tn-flex-row-between" style="background-color: #f3f3f3;border-radius: 3px;">
							<view><text class="label">总分：</text><text class="value">{{item.totalScore}}分</text></view>
							<view><text class="label">及格分：</text><text class="value">{{item.qualifyScore}}分</text></view>
							<view><text class="label">时长：</text><text class="value">{{item.totalTime}}分钟</text></view>
						</view>

					</uni-card>
				</block>
				<view class="tn-margin-sm">
					<uni-pagination :total="total" v-model="query.current" :pageSize='query.size'
						@change='load'></uni-pagination>
				</view>

			</view>
		</view>
		<!-- 我的考试 -->
		<view v-if="current===1">
			<view class="tn-margin-sm">
				<block v-for="(item, index) in list" style="" :key="index">
					<uni-card class="card" :title="item.title">
						<!-- <view class="title">{{item.title}}</view> -->
						<view> <text class="label">考试次数：<text class="value">{{ item.tryCount }}</text></text></view>
						<view><text class="label">最高分：</text><text class="value">{{item.maxScore}}分</text></view>
						<view> <text class="label">是否通过：<text class="value">{{item.passed===true?'通过':'未通过'}}</text></text></view>
						<view><text class="label">最后考试时间：</text><text class="value">{{dayjs(item.updateTime).format('YYYY-MM-DD HH:mm')}}</text></view>
						<view slot="actions" class="card-actions no-border">
							<button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="feedback"
								@click="examDetail(item)">
								考试详情
							</button>
							<button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="feedback"
								@click="toList(item)">
								考试错题
							</button>
						</view>
					</uni-card>
				</block>
				<view class="tn-margin-sm">
					<uni-pagination :total="total" v-model="query.current" :pageSize='query.size'
						@change='load'></uni-pagination>
				</view>
			</view>
		</view>


		<block v-if="showDetail">
			<tn-popup :closeIconSize="50" id="popup" mode="bottom" v-model="showDetail" mask closeBtn length="75%">
				<view class="content" style="margin-top: 50px;">
					<uni-list v-for="(item,index) in examList" :key='index' class="tn-margin-sm">
						<uni-row>
								<text class="tn-text-md">考试时间：<text class="tn-color-gray">{{dayjs(item.createTime).format('YYYY-MM-DD HH:mm')}}</text></text>
						</uni-row>
						<uni-row>
								<text class="tn-text-md">考试用时：<text class="tn-color-gray">{{item.userTime}}分钟</text></text>
						</uni-row>
						<uni-row>
								<text class="tn-text-md">考试得分：<text class="tn-color-gray">{{item.userScore}}</text></text>
						</uni-row>
						<uni-row>
								<text class="tn-text-md">是否合格：<text class="tn-color-gray">{{item.hasSaq===false?'否':'是'}}</text></text>
						</uni-row>
						<uni-row>
								<text class="tn-text-md">考试状态：<text class="tn-color-gray">{{item.state===2?'已考完':'考试中'}}</text></text>
						</uni-row>
					</uni-list>
				</view>
			</tn-popup>
		</block>

		<tn-modal v-model="show" content="确认开始考试吗？" :button="button" :maskCloseable="false" @click="clickBtn" />

	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import {
		hmsToSeconds,secondsToHMS
	} from '@/utils/formatData'
	import {
		getList,
		checkProcess,
		createPaper,
		myPaging,
		paging,
		selectDura
	} from '@/api/exam.js'

	export default {
		data() {
			return {
				show: false,
				showDetail: false,
				current: 0,
				query: {
					params: {},
					current: 1,
					size: 10
				},
				isRun: false,
				doingExam: {},
				examList: [],
				total: 0,
				paperId: null,
				scrollList: [{
						name: '考试大厅',
					},
					{
						name: '我的考试'
					},
				],
				list: [],
				button: [{
						text: '取消',
						backgroundColor: '#d4d4cd',
						fontColor: '#FFFFFF'
					},
					{
						text: '确定',
						backgroundColor: 'tn-bg-indigo',
						fontColor: '#FFFFFF'
					}
				],
			}
		},
		onShow() {
			this.isRun = false;
			checkProcess().then(res => {
				if (res.code === 0) {
					if (res.data?.id) {
						this.isRun = true
						this.doingExam = res.data
					}
				}
			})
      if(this.current === 0){
        this.load()
      }else if(this.current === 1){
        this.loadMy()
      }
		},
		methods: {
			dayjs,
			hmsToSeconds,secondsToHMS,
			examDetail(t) {
				this.showDetail = true
				paging({
					current: 1,
					size: 1000,
					params: {
						userId: t.userId,
						examId: t.examId
					}
				}).then(res => {
					this.examList = res.data.records
					this.$forceUpdate()
				})
			},
			load() {
				getList(this.query).then(res => {
					if (res.code === 0) {
						this.total = res.data.total
						this.list = res.data.records
					}
				})
			},
			loadMy() {
				myPaging(this.query).then(res => {
					if (res.code === 0) {
						this.total = res.data.total
						this.list = res.data.records
					}
				})
			},
			tabChange(val) {
        this.list = []
				this.current = val
				this.query = {
					params: {},
					current: 1,
					size: 10
				}
				if (val < 1) {
					this.load()
				} else {
					this.loadMy()
				}
			},
			toExam() {
				//继续考试
				uni.reLaunch({
					url: '/pages/exam/detail?id=' + this.doingExam.id +"&title="+this.doingExam.title
				})
			},
			toList(item) {
				uni.navigateTo({
					url: '/pages/exam/errList?examId=' + item.examId
				})
			},
			toDetail(item) {
				this.paperId = item.id
				this.title = item.title
				this.show = true
			},
			clickBtn(e) {
				this.show = false
				if (e.index * 1 === 1) {
					// 判断培训
					selectDura({
						examId: this.paperId
					}).then(res2 => {
						if (res2.success) {
							//创建考试
							createPaper({
								examId: this.paperId
							}).then(res => {
								uni.navigateTo({
									url: '/pages/exam/detail?id=' + res.data.id +"&title="+this.title
								})
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: res2.msg
							})
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tn-list-cell {
		position: relative;
		width: 100%;
		box-sizing: border-box;
		background-color: #FFFFFF;
		color: $tn-font-color;
		font-size: 28rpx;
		padding: 22rpx 22rpx;
	}


	$list-item-pd: 5px 5px;

	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}

	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}

	.card {
		margin: 0 !important;
		border-radius: 10px;
		margin-top: 15px !important;
		::v-deep {
			.uni-card__header {
				.uni-card__header-box {
					.uni-card__header-content-title {
						font-size: 32rpx;
						font-weight: bold;
					}
				}
			}
			.title{
				color: #333;
				line-height: 1.5em;
				font-size: 32rpx;
				font-weight: bold;
			}
			view{
				padding: 2px;
				line-height: 2em;
			}
			.value {
				color: $tn-color-gray;
			}
		}
	}
	#popup{
		::v-deep{
			.uni-row{
				line-height: 1.8em;
			}
		}
	}
</style>
